<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>罗店中学-校址变迁</title>
    <link rel="stylesheet" href="swiper/swiper.min.css">
    <link rel="stylesheet" href="css/all.min.css">
</head>

<body class="address_bg">
    <!-- 顶部区域 start-->
    <div class="topbar clearfix">
        <a href="index.html"   class="logo"      title="罗店中学"> </a>
        <div    class="nav"   >
            <ul>
                <li ><a href="history.html"><span class="txt">校史概览</span></a></li>
                <li ><a href="alumni.html"><span class="txt">校友录</span></a></li>
                <li ><a href="leader.html"><span class="txt">历届领导</span></a></li>
                <li ><a href="meritorious.html"><span class="txt">功勋走廊</span></a></li>
                <li  class="current" ><a href="address_change.html"><span class="txt">校址变迁</span></a></li>
                <li ><a href="school_song.html"><span class="txt">罗中校歌</span></a></li>
            </ul>
        </div>
    </div>
    <!-- // 顶部区域  end-->
    <div class="history-swiper-box address-swiper-box">
        <div class="swiper-container address-swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="inner">
                        <div class="address-img">
                            <img src="images/address_img.jpg" alt="">
                        </div>
                        <div class="info">
                            <h3>1942年<br />旦明补习社</h3>
                            <p>东皇庙</p>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="inner">
                        <div class="address-img">
                            <img src="images/address_img-02.jpg" alt="">
                        </div>
                        <div class="info">
                            <h3>1942年-1949年<br />
                                罗溪中学</h3>
                            <p>新村（翁家小洋房）<br />
                                朱家祠堂（亭前街）<br />
                                扩展到西巷街<br />
                                扩展到沪太路西<br />
                                老沪太路西</p>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="inner">
                        <div class="address-img">
                            <img src="images/address_img-03.jpg" alt="">
                        </div>
                        <div class="info">
                            <h3>1956年-1965年<br />宝山二中</h3>
                            <p>老沪太路西 </p>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="inner">
                        <div class="address-img">
                            <img src="images/address_img-04.jpg" alt="">
                        </div>
                        <div class="info">
                            <h3>1965年-2000年<br />罗店中学</h3>
                            <p>老沪太路西<br />
                                1987年升级为县重点中学</p>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="inner">
                        <div class="address-img">
                            <img src="images/address_img-05.jpg" alt="">
                        </div>
                        <div class="info">
                            <h3>2000年-至今<br />上师大附属罗店中学</h3>
                            <p>罗新路707号</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Add Progressbar Pagination start-->
        <div class="swiper-pagination progressbar-pagination"></div>
        <!-- // end -->
        <!-- 时间轴导航 start -->
        <div class="time_axis_nav">
            <div class="item"><span class="txt">1942</span></div>
            <div class="item"><span class="txt">1942-1949</span></div>
            <div class="item"><span class="txt">1956-1965</span></div>
            <div class="item"><span class="txt">1965-2000</span></div>
            <div class="item"><span class="txt">2007-至今</span></div>
        </div>
        <!-- // end -->
    </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="swiper/swiper.min.js"></script>
    <script src="js/common.js"></script>
    <script>
        $(function () {
            var addressSwiper = new Swiper('.address-swiper', {
                slidesPerView: 'auto',
                spaceBetween: 60,
                speed: 600,
                freeMode: true,
                mousewheel: true,
                pagination: {
                    el: '.progressbar-pagination',
                    clickable: true,
                    type: 'progressbar',
                },
                autoplay: {
                    delay: 4000,
                    disableOnInteraction: false,
                },
                on: {
                    slideChangeTransitionEnd: function () {
                        // console.log(this.activeIndex); //切换结束时，告诉我现在是第几个slide
                        // $('.time_axis_nav .item').eq(this.activeIndex).addClass('active').siblings()
                        //     .removeClass('active')
                        // // 修改url参数                      
                    }
                }
            });

            var timeAxisNavItems = $('.time_axis_nav .item').click(function () {
                var idx = timeAxisNavItems.index(this)
                addressSwiper.slideTo(idx, 600, true)
            })

        })
    </script>
</body>

</html>